<template>
  <div class="footer_box">
    <div>
      <el-checkbox v-model="chooseAll"></el-checkbox>
      选中{{count}}/总共{{todos.length}}
    </div>
    <div>
      <el-button type="primary" size="mini" @click="deleteChoose">删除所有选中的项</el-button>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed } from "vue";
import { Todo } from "@/types/todo.ts";
export default defineComponent({
  name: "ft",
  props: {
    todos: {
      type: Array as () => Todo[],
      required: true
    },
    updateTodos:{
      type:Function,
      required:true
    },
    deleteChooseAll:{
      type:Function,
      required:true
    }
  },
  setup(props) {
    const deleteChoose = () => {
      props.deleteChooseAll();
    };
    const count = computed(() => {
      // 俩中方法 filter和reduce 学习reduce
      // return props.todos.filter(todo=>todo.isCheck).length
      return props.todos.reduce((pre,todo,index)=>pre +(todo.isCheck?1:0),0);
    });
    const chooseAll = computed({
      get(){
        return count.value>0&&count.value == props.todos.length
      },
      set(val:boolean){
        props.updateTodos(val)
      }
    })
    return {
      deleteChoose,
      count,
      chooseAll
    };
  }
});
</script>

<style lang="less" scoped>
.footer_box {
  height: 36px;
  border-top: solid 1px #ddd;
  display: flex;
  box-sizing: border-box;
  padding-top: 10px;
  justify-content: space-between;
}
</style>
